<template>
<div>
    
    <el-radio-group v-model="radio" class="radio">       
        <el-radio :label="1" style="marginRight:50px;">绑定线体</el-radio>       
        <el-radio :label="2" style="marginRight:50px;">绑定产品</el-radio>
        <el-radio :label="3">绑定订单</el-radio>
    </el-radio-group>
    <div class="setline" v-show="radio==1">1</div>
    <div class="details" v-show="radio==2">
        <div class="de_left" style="float:left;">     
            <h4>已绑定列表</h4>
            <ul>
                <li v-for="item in list" :key="item.ProductId">{{item.Name+ '—' + item.Code}}</li>
            </ul>            
        </div>
      
        <div class="de_main">
            <div class="de_right">
                <el-table 
                    height="385"
                    @selection-change="handleSelectionChange"
                    :data="productList"
                    :header-cell-style="{background:'#f4f4f4'}">
                    <el-table-column 
                        fixed 
                        type="selection"
                        align="center"
                        width="55">
                    </el-table-column>
                    <el-table-column
                        prop="Code"
                        width="150"
                        align="center"
                        label="产品编码">
                    </el-table-column>
                    <el-table-column
                        prop="Name"
                        label="产品名称"
                        align="center"
                        width="150">
                    </el-table-column>
                    <el-table-column
                        prop="ProductType"
                        align="center"
                        label="产品类型">
                    </el-table-column>
                </el-table>
           </div>
            <div class="botBtn">
                <el-button class="quxiao" @click="removeSubmit()">取消绑定</el-button>
                <el-button class="queding" type="primary" @click="preseSubmit()">确认绑定</el-button>
            </div> 
        </div>
    </div>
    <div class="setorder" v-show="radio==3">4</div>
</div>
</template>

<script>
import {
getProductListByKeyName,  //查询产品
setTechRouteByProduct,//配置产品工艺路线
getTechRouteProductList  //工艺路线-产品详情
} from "@/api/technology"

export default {
    props:['val'],
    data(){
        return{
            radio:2,
            value:'',
            productList:[],
            list:[],
            checkIds:[],
            checkData:[],
            
            addlist:this.val,
            name:'',
        }
    },
    watch:{
        val(){
            this.addlist = this.val;
        }
    },
    mounted() {
        this.addlist = this.val;
    },
    created(){
        this.init()
    },
    methods:{
        handleSelectionChange(val){
           
            this.checkData = val
            let listId=[]
            val.forEach(el => {
                listId.push(el.ProductId)
            });
            this.checkIds = listId
        },
        init(){
            this.productList = []
            getProductListByKeyName().then( res => {
                if (parseInt(res.Code) === 1) {
                    this.productList = res.Result
                    
                    this.list = []
                    getTechRouteProductList({techRouteId:this.addlist[0].TechRouteId}).then(res => {
                        if (parseInt(res.Code) === 1) {
                            this.list = res.Result.ProductList
                        }
                    })
                } 
            })   
              
        },
        preseSubmit(){
            let listid=''
            this.checkIds.forEach(el => {
                listid+=el+','
            });
            listid=listid.substr(0,listid.length-1) 
            if(this.checkData.length<1){
                this.$message('请勾选需要绑定的产品')
            }else{
                setTechRouteByProduct({techRouteId:parseInt(this.addlist[0].TechRouteId),strProductID:listid,check:1}).then(res=> {
                    if(parseInt(res.Code === 1)){
                                        
                    }
                    this.init()
                }).catch(res=>{})  
            }
                    
        },
        removeSubmit(){
            let listid=''
            this.checkIds.forEach(el => {
                listid+=el+','
            });
            listid=listid.substr(0,listid.length-1)
            if(this.checkData.length<1){
                this.$message('请勾选需要取消绑定的产品')
            }else{
                setTechRouteByProduct({techRouteId:parseInt(this.addlist[0].TechRouteId),strProductID:listid,check:0}).then(res=> {
                    if(parseInt(res.Code) === 1){
                                        
                    }
                    this.init()   
                }).catch(res=>{})
            }
        }
    }
}
</script>

<style scoped lang="scss">
.radio{
    width: 100%;
    text-align: center;
    /* margin-left: 30%; */
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}
.setline{
    width: 90%;
    margin: 0 auto;
    height: 500px;
    margin-top: 20px;
}
.setorder{
    width: 90%;
    margin: 0 auto;
    height: 500px;
    margin-top: 20px;
}
.details{
    width: 90%;
    margin: 0 auto;
    height: 500px;
    margin-top: 20px;
    .de_left{
        width: 170px;
        height: 442px;
        background-color: #eee;       
        h4{
            height: 36px;
            line-height: 30px;
            text-align: center;
            font-size: 14px;
            color: #000;
        }
        ul {
            height: 406px;
            width: 100%;
            overflow-x:hidden;
            li{
                width: 100%;
                height:40px;
                margin-left:10px;
                margin-bottom: 5px;
            }
        }
        
    }
    .de_main{
        width: 480px;
        float: right;
        .de_right{
            width:100%;            
            height:360px;                 
            
        }
        .botBtn{
            width: 100%;
            height: 40px;
            margin-top: 40px;
            text-align: center;

            // background-color: #eee;
            .quxiao{
                margin-right: 20px;
                width: 152px;
                height: 40px;
                background-color: #f1f1f1;
                border: none;
            }
            .queding{
                margin-left: 20px;
                width: 152px;
                height: 40px;
            }
        }
    }
       
}
</style>
